<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link media="screen" href="jquery.msg.css" rel="stylesheet" type="text/css">
    <title>jQuery MSG Plugin Demo</title>
    <style type="text/css">
      h1{
        text-align : center;
      }
      h3{
        padding: 0;
        margin: 0 0 10px;
      }
      #wrap{
        width: 700px;
        margin: 0 auto 50px;
      }
      #info{
        text-align: center;
        margin: 50px 0 0;
      }
      .play-ground{
        background: #eeeeee;
        margin: 0 0 20px;
        padding: 10px;
      }
      .spacer{
        height: 40px;
      }
      .btn{
        background: #cccccc;
        float: left;
        display: inline;
        font-family: arial;
        font-size: 12px;
        font-weight: bolder;
        padding: 3px 7px;
        margin: 0 8px 0 0;
        cursor: pointer;
      }
      .custom-theme .jquery-msg-content{
        border: 10px solid #333333;
        background: white;
        font-family: Monaco, 'Lucida Console', monospace;
      }
      .btn-wrap{
        text-align: center;
        margin: 0;
      }
      .btn-wrap span{
        font-weight: bolder;
        padding: 0 8px 0 0;
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <h1>
        jQuery MSG Plugin Demo
      </h1>
      
      <div class="play-ground">
        <h3>Default usage</h3>
        <div class="spacer">
          <div id="default" class="btn">Click me</div>
        </div>
        <pre>
          $.msg();
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Custom content</h3>
        <div class="spacer">
          <div id="custom-content" class="btn">Click me</div>
        </div>
        <pre>
          $.msg({ content : 'blah blah' });
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Disable auto unblock</h3>
        <div class="spacer">
          <div id="disable-auto-unblock" class="btn">Click me</div>
        </div>
        <pre>
          $.msg({ autoUnblock : false });
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Custom speed</h3>
        <div class="spacer">
          <div id="custom-speed" class="btn">Click me</div>
        </div>
        <pre>
          $.msg({ 
            fadeIn : 500,
            fadeOut : 200,
            timeOut : 5000 
          });
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Switch theme</h3>
        <div class="spacer">
          <div id="switch-theme" class="btn">Click me</div>
        </div>
        <pre>
          $.msg({ klass : 'white-on-black' });
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Custom theme</h3>
        <div class="spacer">
          <div id="custom-theme" class="btn">Click me</div>
        </div>
        <pre>
          $.msg({ klass : 'custom-theme' });
        </pre>
      </div>
      
      <div class="play-ground">
        <h3>Replace content, events and manually unblock</h3>
        <div class="spacer">
          <div id="replace-content" class="btn">Click to delete the user</div>
          <div id="restore-user" class="btn">Restore user</div>
        </div>
        <p id="the-user">I am the user<p>
        <pre>
          
          // block the screen to show msg when click on #replace-content btn
          $( '#replace-content' ).bind( 'click', function(){
            $.msg({ 
              autoUnblock : false,
              clickUnblock : false,
              content: '&lt;p&gt;Delete this user?&lt;/p&gt;' +
                       '&lt;p class="btn-wrap"&gt;' + 
                         '&lt;span id="yes"&gt;Yes&lt;/span&gt;' + 
                         '&lt;span id="no"&gt;no&lt;/span&gt;' + 
                       '&lt;/p&gt;',
              afterBlock : function(){
                // store 'this' for other scope to use
                var self = this;

                // delete user and auto unblock the screen after 1 second
                // when click #yes btn
                $( '#yes' ).bind( 'click', function(){

                  // self.method is not chainable
                  self.replace( 'User deleted.' );
                  self.unblock( 2000 );
                  // this equals to 
                  // $.msg( 'replace', 'User deleted.' ).
                  //   msg( 'unblock', 2000 );

                  $( '#the-user' ).empty();
                });

                $( '#no' ).bind( 'click', function(){

                  // this equals to $.msg( 'unblock' );
                  self.unblock();
                });
              },
              beforeUnblock : function(){
                alert( 'This is a callback from beforeUnblock event handler :)' )
              }
            });
          });
        </pre>
      </div>
      
      <h3 id="info">
        Demo provides by <a href="http://dreamerslab.com/">DreamersLab</a>
      </h3>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.center.min.js"></script>
    <script type="text/javascript" src="jquery.msg.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      // wrap everything in document ready event
      $( function(){
        
        $( '#default' ).bind( 'click', function(){
          $.msg();
        });
        
        $( '#custom-content' ).bind( 'click', function(){
          $.msg({ content: 'blah blah' });
        });
        
        $( '#disable-auto-unblock' ).bind( 'click', function(){
          $.msg({ autoUnblock : false });
        });
        
        $( '#custom-speed' ).bind( 'click', function(){
          $.msg({ 
            fadeIn : 500,
            fadeOut : 200,
            timeOut : 5000 
          });
        });
        
        $( '#switch-theme' ).bind( 'click', function(){
          $.msg({ klass : 'white-on-black' });
        });
        
        $( '#custom-theme' ).bind( 'click', function(){
          $.msg({ klass : 'custom-theme' });
        });
        
        // block the screen to show msg when click on #replace-content btn
        $( '#replace-content' ).bind( 'click', function(){
          $.msg({ 
            autoUnblock : false,
            clickUnblock : false,
            content: '<p>Delete this user?</p>' +
                     '<p class="btn-wrap">' + 
                       '<span id="yes">Yes</span>' + 
                       '<span id="no">no</span>' + 
                     '</p>',
            afterBlock : function(){
              // store 'this' for other scope to use
              var self = this;
              
              // delete user and auto unblock the screen after 1 second
              // when click #yes btn
              $( '#yes' ).bind( 'click', function(){
                
                // self.method is not chainable
                self.replace( 'User deleted.' );
                self.unblock( 2000 );
                // this equals to 
                // $.msg( 'replace', 'User deleted.' ).
                //   msg( 'unblock', 2000 );
                
                $( '#the-user' ).empty();
              });
              
              $( '#no' ).bind( 'click', function(){
                
                // this equals to $.msg( 'unblock' );
                self.unblock();
              });
            },
            beforeUnblock : function(){
              alert( 'This is a callback from beforeUnblock event handler :)' )
            }
          });
        });
        
        $( '#restore-user' ).bind( 'click', function(){
          $( '#the-user' ).text( 'I am the user' );
        });
        
      });
      
    </script>
    <script type="text/javascript" charset="utf-8">
      // google analytics
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-20960410-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
